
<template>
  <div class="count-center">
    <div class="count-center-title">{{title}}</div>
    <count-to class="count-to" :style="{fontSize:size+'px'}" :endVal="number" :delay="delay"></count-to>
  </div>
</template>

<script lang="ts" setup>
  import {CountTo} from 'vue3-count-to';

  interface Props {
    title?:string
    number:number
    delay:number
    size?:34 | number
  }

  defineProps<Props>()
</script>

<style lang="scss" scoped>
  .count-center{
    &-title {
      font-family: SourceHanSansCN-Normal;
      font-size: 14px;
      color: #D4EDFF;
      line-height: 20px;
      margin-bottom: 30px;
    }
  }
  .count-to {
    font-size: 34px;
    color: #fff;
    font-weight: 700;
    font-family: Arial-BoldMT;
  }
</style>